<template>
  <Skeletion v-if="loading" />
  <template v-else>
    <van-sticky>
      <header class="flex justify-between px-4 pt-3 pb-2 align-middle bg-white">
        <span class="text-base font-bold">三叶中文网 | 触屏版</span>
        <van-icon name="user-circle-o" size="26" color="#459bf3" />
      </header>
    </van-sticky>
    <!---search -->
    <router-link to="/search">
      <van-search shape="round" disabled placeholder="搜一搜"> </van-search>
    </router-link>
    <div class="home-container">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <!--banner-->
        <banner :bannerList="bannerList"></banner>

        <div class="mb-4">
          <Platehead title="热门推荐" @getMore="clickToMore('Hot')" />
          <ScrollList height="142">
            <NormalCard
              class="mr-3"
              v-for="item in overList"
              :key="item.book_id"
              :book_id="item.book_id"
              :name="item.name"
              :writer="item.writer"
              :image="item.image"
            />
          </ScrollList>
        </div>

        <div class="mb-4">
          <Platehead title="点击排行" @getMore="clickToMore('Rank')" />
          <ScrollList height="142">
            <NormalCard
              class="mr-3"
              v-for="item in clickList"
              :key="item.book_id"
              :book_id="item.book_id"
              :name="item.name"
              :writer="item.writer"
              :image="item.image"
            />
          </ScrollList>
        </div>

        <div class="mb-4">
          <Platehead title="最近更新" @getMore="clickToMore('Update')" />
          <ScrollList height="142">
            <NormalCard
              class="mr-3"
              v-for="item in updateList"
              :key="item.book_id"
              :book_id="item.book_id"
              :name="item.name"
              :writer="item.writer"
              :image="item.image"
            />
          </ScrollList>
        </div>

        <div>
          <Platehead title="分类推荐" @getMore="clickToMore('Category')" />
          <van-tabs type="card" color="#92c8ff" @change="onTypeChange" class="bg-white">
            <van-tab
              v-for="item in bookTypeList"
              :title="item.name.slice(0, 2)"
              :key="item.id"
            >
              <ScrollList class="mt-3">
                <NormalCard
                  class="mr-3"
                  v-for="item in currentTypeList"
                  :key="item.book_id"
                  :book_id="item.book_id"
                  :name="item.name"
                  :writer="item.writer"
                  :image="item.image"
                />
              </ScrollList>
            </van-tab>
          </van-tabs>
        </div>
      </van-pull-refresh>
      <footer class="py-2 text-sm text-center text-gray-400">人家是有底线的~</footer>
    </div>
    <router-link to="/history">
      <span class="history-read">最近阅读</span>
    </router-link>
    <BackToTop />
  </template>
</template>

<script lang="ts" setup>
import { ref, Ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { getBookType } from '@/api/common'
import { BookType } from '@/common/types/index'
import Platehead from '@/components/Platehead/Platehead.vue'
import Banner from '@/components/Banner/Banner.vue'
import { BookItem } from '@/common/types'
import {
  getBannerList,
  getUpdateList,
  getOverList,
  getClickList,
  getTypeList
} from '@/api/homepage'
import ScrollList from '@/components/ScrollList/ScrollList.vue'
import NormalCard from '@/components/NormalCard/NormalCard.vue'
import BackToTop from '@/components/BackToTop/BackToTop.vue'
import Skeletion from './components/Skeleton/Skeleton.vue'

const loading = ref(false)

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const bookTypeList: Ref<BookType[]> = ref([])
const bannerList: Ref<BookItem[]> = ref([])
const updateList: Ref<BookItem[]> = ref([])
const overList: Ref<BookItem[]> = ref([])
const clickList: Ref<BookItem[]> = ref([])

interface typeItem {
  id: number
  name: string
  list: BookItem[]
}

const currentTypeList: Ref<BookItem[]> = ref([])
let typeList: typeItem[] = []
getTypeList().then((res) => {
  typeList = res.data
  currentTypeList.value = typeList[0].list
})
const onTypeChange = (name: string | number) => {
  const currentIndex = Number(name) || 0
  currentTypeList.value = typeList[currentIndex].list
}

onBeforeMount(() => {
  loading.value = true
  Promise.all([
    getBookType(),
    getBannerList(),
    getUpdateList(),
    getOverList(),
    getClickList()
  ])
    .then((resList) => {
      bookTypeList.value = resList[0].data.bookType
      bannerList.value = resList[1].data.list
      updateList.value = resList[2].data.list
      overList.value = resList[3].data.list
      clickList.value = resList[4].data.list
      loading.value = false
    })
    .catch((e) => {
      loading.value = false
    })
})

const router = useRouter()

const clickToMore = (name: string) => {
  router.push({
    name
  })
}
</script>

<style scoped lang="scss">
.home-container {
  background-color: #f6f7f9;
}
.history-read {
  position: fixed;
  z-index: 2;
  right: 20px;
  bottom: 80px;
  font-size: 12px;
  line-height: 1.16667;
  display: inline-block;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  text-align: center;
  color: #fff;
  border-radius: 99px;
  background-color: #459bf3;
  padding: 8px;
}
</style>
